<template>
  <div class="content_panel project_modules">
    <div class="module_content">
      <div class="content_panel project_modules">
        <div>
          <ul class="top-info">
            <li>
              <div class="label">UserId:</div>
              <div class="content">{{ tipsData.userId }}</div>
            </li>
            <li>
              <div class="label">{{ $t("common.mobileNumber") }}:</div>
              <!--手机号码-->
              <div class="content">{{ tipsData.phone }}</div>
            </li>
            <li>
              <div class="label">{{ $t("common.innerOrderId") }}:</div>
              <!--内部订单号-->
              <div class="content">{{ tipsData.orderId }}</div>
            </li>
            <li>
              <div class="label">{{ $t("system.appName") }}:</div>
              <!--app名称-->
              <div class="content">{{ tipsData.appName }}</div>
            </li>
            <li>
              <div class="label">{{ $t("common.productName") }}:</div>
              <!--app名称-->
              <div class="content">{{ tipsData.whiteProductName }}</div>
            </li>
            <li>
              <div class="label">{{ $t("common.hasRepayAmount") }}:</div>
              <div class="content">
                {{ tipsData.payedAmount}}
              </div>
            </li>
          </ul>
        </div>
        <div class="table_list">
          <el-table
            :data="tableData"
            style="width: 100%"
            :highlight-current-row="true"
          >
            <el-table-column :label="$t('install.borrowingCycle')" prop="currentPeriod" min-width="140"></el-table-column>
            <el-table-column :label="$t('common.contactAmount')" prop="shouldRepay" min-width="140">
              <template slot-scope="{ row }">{{ row.shouldRepay | formatCurrency }}</template>
            </el-table-column>

            
            <el-table-column :label="$t('common.shouldRepayTime')" prop="repayTime" min-width="140">
              <template slot-scope="{ row }">{{ row.repayTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
            </el-table-column>
            <el-table-column :label="$t('common.hasRepayAmount')" prop="payedAmount" min-width="140"><!--以还金额-->
              <template slot-scope="{ row }">{{ row.payedAmount | formatCurrency }}</template>
            </el-table-column>
            <el-table-column :label="$t('common.restRepay')" prop="restRepay" min-width="140"><!--挂账金额-->
              <template slot-scope="{ row }">{{ row.restRepay | formatCurrency }}</template>
            </el-table-column>
            <el-table-column :label="$t('common.penaltyInterest')" prop="lateCharge" min-width="140"><!--罚息-->
              <template slot-scope="{ row }">{{ row.lateCharge | formatCurrency }}</template>
            </el-table-column>
            <el-table-column :label="$t('common.overdueDays')" prop="lateDays" min-width="140"></el-table-column><!--逾期天数-->
            <!-- <el-table-column :label="$t('install.amountReduction')" prop="csDerateAmount" min-width="140">
              <template slot-scope="{ row }">{{ row.csDerateAmount | formatCurrency }}</template>
            </el-table-column> -->
            <!--金额减免-->
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name:'spread-order-detail',
  props: {
    type:'',
    rowData: {
      tyep: Object,
    },
  },
  data() {
    return {
      tipsData:{},
      tableData:[],
    };
  },
  methods: {
    mergeData(target, source) {
      // 合并数据
      if (!source || typeof source !== "object") {
        return;
      }
      Object.keys(target).forEach((key) => {
        if (!target[key] && (source[key] || source[key] === 0)) {
          target[key] = source[key];
        }
      });
    },
  getRepayPeriodListByOrderId(){
    
    if (this.type =='pre'){
      let params = {
        ycsOverdueInfoId:this.rowData.id
      };
      this.$api.collection.queryYcsOverdueInstallmentOrderList(params).then(res=>{
        const {status, data, error} = res;
        if ('1' === status && '00000000' === error && data) {
          this.tableData = data.scheduleInfoList
          this.tipsData = data
        }
      })
    }else{
      let params = {
        overdueInfoId:this.rowData.id
      };
      this.$api.collection.queryOverdueInstallmentOrderList(params).then(res=>{
        const {status, data, error} = res;
        if ('1' === status && '00000000' === error && data) {
          this.tableData = data.scheduleInfoList
          this.tipsData = data
        }
      })
    }
    
  },
  },
  created() {
    this.getRepayPeriodListByOrderId()
    // this.userId = params.userId;
    // this.orderId = params.orderId;
  },
};
</script>

<style lang="scss" scoped>
  .left_menu {
      display: none;
  }
 .top-info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  li {
    display: flex;
    align-items: center;
    justify-content: space-around;
    div {
      padding: 0 10px;
    }
  }
}
</style>